<template>
<div class="container__">
    <div class="xuexizhuangtai">
        <span v-show="info.course_desc.article_type==5&&info.desc.status==0" class="status">拼课中</span>
        <span v-show="info.course_desc.article_type==5&&info.desc.status==1" class="status">拼课成功</span>
        <span v-show="info.course_desc.article_type==6&&info.desc.status==1" class="status">待学习</span>
        <span v-show="info.course_desc.article_type==5&&info.desc.status==2" class="status">拼课失败
            <span style="font-size:12px" v-show="info.status==6">(退款成功)</span>
            <span style="font-size:12px" v-show="info.status==5">(退款中)</span>
            <span style="font-size:12px" v-show="info.status==7">(退款失败)</span>
        </span>
        <span v-show="info.desc.status==3" class="status">已学习 </span>
        <span v-show="info.status==4" class="status">已过期 </span>
        <span v-show="info.status>4" class="status">已过期 
            <span style="font-size:12px" v-show="info.status==6">(退款成功)</span>
            <span style="font-size:12px" v-show="info.status==5">(退款中)</span>
            <span style="font-size:12px" v-show="info.status==7">(退款失败)</span>
        </span>
        <span class="suc" v-show="info.course_desc.article_type==6&&info.desc.status==1">抢课成功、请在课程开始时去学习</span>
    </div>
    <div class="infobox">
        <div class="top" v-if="info.course_desc.article_type==6||info.course_desc.article_type==5&&info.desc.status!=0&&info.desc.status!=2">
            <span>学习码：{{info.desc.learnning_code}}</span>
            <div v-if="info.desc.status==4">学习码已过期，未在规定时间内学习</div>
            <div v-if="info.desc.status==1">请妥善保管您的学习码，不要外泄</div>
        </div>
        <div class="top" v-if="info.course_desc.article_type==5&&info.desc.status==0">
            <!-- <div class="daojishi">
                <div class="shenyu">剩余</div>
                <div><span class="time">{{data.day}}</span>：<span class="time">{{data.hour}}</span>：<span class="time">{{data.min}}</span>：<span class="time">{{data.sec}}</span></div>
            </div> -->
            拼课中 ，请耐心等待
        </div>
        <div class="top" v-if="info.course_desc.article_type==5&&info.desc.status==2">
            <h3>很遗憾，拼课失败</h3>
        </div>
        <div class="erweima" v-if="info.desc.status>=0&&info.desc.status!=2">
            <img :src="info.desc.qrcode" alt="">
        </div>
            <div class="dizhi">
                <div class="itm">
                    <div class="lab">学习地址：</div>
                    <div class="cont">{{info.course_desc.address}}</div>
                </div>
                <div class="itm">
                    <div class="lab">联系电话：</div>
                    <div class="cont">{{info.course_desc.phone}}</div>
                </div>
            </div>
        </div>

        <div class="goods">
            <div class="body"  @click="toRuter(info.course_desc.article_type,info.course_desc.id)">
                <div class="thumb">
                    <img :src="info.course_desc.thumb" alt="">
                    <div class="postion"><img v-show="info.course_desc.article_type==5" :src="img+'/status1.png'" alt=""><img v-show="info.course_desc.article_type==6" :src="img+'/status2.png'" alt=""></div>
                    </div>
                    <div class="bodyinfo">
                        <div class="title">{{info.course_desc.title}}</div>
                         <div class="keTime" v-if="info.order_type==6">
                             <span>开课时间：</span>
                             <div>{{info.course_desc.course_start_time}}</div>
                         </div>   
                        <div class="time">￥{{info.course_desc.price}}<span>￥{{info.course_desc.prime_price}}</span></div>
                    </div>
                </div>
            </div>
            <div class="jiage">
                <div class="item">
                    <span>应付款：</span>
                    <div>￥{{info.goods_amount}}</div>
                </div>
                <div class="item" v-if="info.discount!=0">
                    <span>优惠：</span>
                    <div>会员减{{info.discount}}元</div>
                </div>
                <div class="item">
                    <span>实付款：</span>
                    <div>￥{{info.total_fee}}</div>
                </div>
            </div>
            <div class="space-lin"></div>
            <div class="pinjia">
                <div class="order">
                    <div class="item">订单编号：{{info.id}}</div>
                    <div class="item">下单时间：{{info.updated_at}}</div>
                    <div class="item">支付方式：
                        <span v-show="info.payment==3">支付宝支付</span>
                        <span v-show="info.payment==1">小程序支付</span>
                        <span v-show="info.payment==2">微信支付</span>
                    </div>
                    <div class="item">发布人：{{info.course_desc.user.nickname}}</div>
                    <div class="item button" v-if="info.desc.status==3&&info.is_evaluation==0">
                        <div @click="pinjiaTo">评价</div>
                    </div>
                    <div class="item button" v-if="info.desc.status==4&&info.status==4">
                        <div @click="tuikuanTo">退款</div>
                    </div>
                </div>
                <div class="tuikuan" v-if="info.status>=5">
                    <div class="item" v-if="info.refund_reason">
                        <div class="left">退款时间：</div>
                        <div class="right">{{info.refund_reason.created_at}}</div>
                    </div>

                    <div class="item" v-if="info.refund_reason.money">
                        <div class="left">退款金额：</div>
                        <div class="right">￥{{info.refund_reason.money}}</div>
                    </div>
                    <div class="item" v-if="info.refund_reason.content">
                        <div class="left">退款原因：</div>
                        <div class="right">{{info.refund_reason.content}}</div>
                    </div>
                    <div class="item" v-if="info.refund_reason.reason">
                        <div class="left">驳回退款原因：</div>
                        <div class="right">{{info.refund_reason.reason}}</div>
                    </div>
                </div>
                <div class="huojiang" v-show="info.order_type==5&&info.desc.buyway!=1">拼课名单</div>
                <div class="huojiang" v-show="info.order_type==6" >抢课名单</div>
                <div class="hujiangmingdan" v-for="(items, index) in list" :key="index">
                    <div class="left">
                        <img :src="items.user.avatar" alt="">
                    </div>
                        <div class="right">
                            <span>{{items.user.nickname}}</span>
                            <div>下单时间：{{items.created_at}}</div>
                        </div>
                    </div>
                </div>

            </div>
</template>

<script>
import { interval } from "@/utils/index";

import { orderdetail } from "@/api/my";  
import { orderOther } from "@/api/my";  
export default {
  data() {
    return {
      data: {
        day: "",
        hour: "",
        min: "",
        sec: ""
      },
      iter: null, //定时器
      info: {},
      img: this.$URL.imgurl,
      list:[],
      load:false,
      page:1    
    };
  },
  methods: {
    pinjiaTo() {
      wx.navigateTo({
        url: "/pages/pingjia/main?id=" + this.info.id
      });
    },
    tuikuanTo() {
      wx.navigateTo({
        url: "/pages/tuikuan/main?info=" + this.info.id
      });
    },
    toRuter(type,id){
        if(type==5){
            let url = "/pages/pinDetail/main?id="+id;
            mpvue.navigateTo({ url });
        }else{
            let url = "/pages/bargainDetail/main?id="+id;
            mpvue.navigateTo({ url });
        }
    },
    inittime() {
      this.data.day = "0" + 0;
      this.data.hour = "0" + 0;
      this.data.min = "0" + 0;
      this.data.sec = "0" + 0;
    },
    settimeout() {
      this.iter = setInterval(() => {
        // var a = interval('2019-6-15 15:11:00')
        var end=new Date(this.info.course_desc.course_start_time);
        var endtime=end.getTime();
        var date = new Date();
        var now = date.getTime();
        
        var a = interval(endtime-now);
        
        if (!a) return clearInterval(this.iter), this.inittime();
        var b = a.split("-");
        this.data.day = b[0] >= 10 ? b[0] : "0" + b[0];
        this.data.hour = b[1] >= 10 ? b[1] : "0" + b[1];
        this.data.min = b[2] >= 10 ? b[2] : "0" + b[2];
        this.data.sec = b[3] >= 10 ? b[3] : "0" + b[3];
      }, 1000);
    },
    getinfo() {
      orderdetail(this.$mp.query.id)
        .then(res => {
          this.info = res.data;
          if (res.data.course_desc.article_type==5 && res.data.desc.status == 0) {
            this.settimeout();
          }
        })
        .catch(err => {});
    },
    getOthers(){
      orderOther({id:this.$mp.query.id,page:this.page}).then(res=>{
         if(res.code==200){
             let lastpage=res.data.last_page;
             this.page==1?this.list=res.data.data:this.list=this.list.concat(res.data.data)
             this.lastpage>this.page?this.load=true:this.load=false
           }
      })
    }
  },
  onReachBottom(){
    if(this.load){
       currentpage++
       this.getList()
    }
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data())
    this.getOthers();
  },
  onUnload(){
    
  },
  onShow(){
    this.getinfo();
  }
};
</script>

<style lang="scss">
.container__ {
  background-color: #f4f5f5;
  min-height: 100vh;
  font-size: 16px;
  // padding: 40px 15px;
  box-sizing: border-box;
  background: url("../../../static/images/1.png") no-repeat;
  background-size: contain;

  .xuexizhuangtai {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    color: #fff;
    box-sizing: border-box;
    padding: 0 15px;

    span {
      font-size: 16px;
      font-weight: bold;
    }

    .suc {
      font-size: 14px;
      font-weight: 500;
    }
  }

  .space-lin {
    height: 5px;
    background: rgba(244, 245, 245, 1);
  }

  .infobox {
    width: 345px;
    max-height: 350px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
    border-radius: 5px;
    margin: 0 auto 22px;
    box-sizing: border-box;
    padding: 0 8px;

    .top {
      height: 72px;
      border-bottom: 1px solid #ddd;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      h3 {
        font-size: 16px;
        font-weight: bold;
        color: rgba(70, 183, 255, 1);
      }

      .daojishi {
        display: flex;
        justify-content: flex-start;

        .shenyu {
          margin-right: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .time {
          height: 20px;
          width: 20px;
          background-color: #3e3d43;
          color: #ffffff;
          font-size: 14px;
          font-weight: bold;
          display: inline-flex;
          justify-content: center;
          align-items: center;
        }
      }

      span {
        color: #46b7ff;
        font-size: 16px;
        font-weight: bold;
      }

      div {
        font-size: 12px;
        font-weight: 500;
        color: #999999;
      }
    }

    .erweima {
      height: 182px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        height: 110px;
        width: 110px;
        border: 1px solid #ddd;
      }
    }

    .dizhi {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 0 23px;

      .itm {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .lab {
          width: 78px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(233, 181, 94, 1);
        }

        .cont {
          width: 209px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }

  .pinjia {
    padding: 20px 15px;

    .hujiangmingdan {
      display: flex;
      justify-content: flex-start;
      // align-items: center;
      margin-bottom: 20px;

      .left {
        width: 40px;
        height: 40px;
        box-sizing: border-box;

        img {
          border: 1px solid #46b7ff;
          border-radius: 50%;
          height: 100%;
          width: 100%;
          box-sizing: border-box;
        }
      }

      .right {
        height: 40px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-left: 11px;

        span {
          font-size: 14px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }

        div {
          font-size: 12px;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
      }
    }

    .huojiang {
      background: url("../../../static/images/classTit.png") no-repeat;
      background-size: contain;
      height: 27px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin-bottom: 15px;
      padding-left: 5px;
    }

    .tuikuan {
      padding: 20px 11px 0;
      border-top: 1px solid #ddd;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .item {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 25px;
        font-size: 14px;
        font-weight: 500;
        color: #666666;

        .left {
          min-width: 100px;
        }
      }
    }

    .order {
      padding: 0 11px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      // margin-bottom: 30px;
      .button {
        display: flex;
        justify-content: flex-end;

        div {
          width: 80px;
          height: 30px;
          background: #1A84FB;
          border-radius: 5px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
        }
      }

      .item {
        margin-bottom: 16px;
        font-size: 14px;
        font-weight: 500;
        color: #666666;
      }
    }
  }

  .jiage {
    height: 100px;
    box-sizing: border-box;
    padding: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
    }
  }

  .goods {
    padding: 0 15px;

    .body {
      display: flex;
      padding: 0 0 15px 0;
      border-bottom: 1px solid #ddd;
      box-sizing: border-box;
      justify-content: space-between;

      .thumb {
        height: 110px;
        width: 154px;
        position: relative;

        .postion {
          position: absolute;
          left: 0;
          width: 54px;
          height: 15px;
          top: 5px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      .bodyinfo {
        width: 181px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
          max-height: 32px;
          font-size: 14px;
          color: #333;
          font-weight: bold;
          line-height: 16px;
          overflow: hidden;
        }
        .keTime{
            font-size:12px;
            font-weight:500;
            color:#666;
            span{
                color: #46B7FF;
            }
        }
        .desc {
          color: #46b7ff;
          font-size: 14px;

          span {
            width: 60px;
            height: 20px;
            background: rgba(234, 247, 255, 1);
            border: 1px solid rgba(70, 183, 255, 1);
            border-radius: 10px;
            // color :rgba(70, 183, 255, 1);
            margin-right: 10px;
          }
        }

        .desc1 {
          color: #999999;
          font-size: 14px;

          span {
            width: 60px;
            height: 20px;
            background: rgba(244, 245, 245, 1);
            border: 1px solid rgba(153, 153, 153, 1);
            border-radius: 10px;
            margin-right: 10px;
          }
        }

        .time {
          font-size: 15px;
          font-weight: bold;
          color: #e9b55e;

          span {
            color: #666666;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 10px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
